@import '@/lib/reset.scss';

.index-section {
    min-height: 1024px;
    width: 960px;
    margin: 0 auto;
    .index-left-section {
        min-height: 1024px;
        width: 700px;
        float: left;
        .user-action-nav {
            @include rect(700px, 50px);
            margin-top:20px;
            float: left;
            background:#fff;
            .user-img {
                @include rect(50px, 50px);
                background: #ccc;
                float: left;
                i {
                    @include rect(50px, 50px);
                    font-size: 30px;
                    display: block;
                    color:#fff;
                    line-height: 50px;
                    text-align: center;
                }
            }
            .user-nav-list {
                @include rect(320px, 50px);
                float: left;
                ul {
                    @include rect(100%, 100%);
                    li {
                        float: left;
                        display: block;
                        padding: 0 18px;
                        line-height: 50px;
                        color: #007fff;
                        font-size: 15px;
                        span{
                            a {
                                color:#007fff;
                            }
                        }
                        i {
                            margin-right: 3.6px;
                        }
                    }
                }
            }
            .index-draft {
                float: right;
                line-height: 50px;
                padding-right: 24px;
                color: #909090;
            }
        }
        .timeline-entry-list {
            width: 700px;
            min-height: 500px;
            float: left;
            margin-top:15.6px;
            background: #fff;
            .list-header {
                @include rect(700px, 46px);
                padding:15.6px 12px;
                border-bottom: 1px solid hsla(0,0%,59.2%,.1);
                .list-header-left {
                    @include rect(180px, 13px);
                    float: left;
                    li {
                        float: left;
                        text-align: 46px;
                        padding: 0 14.4px;
                        border-right: 1px solid hsla(0,0%,59.2%,.2);
                        font-size: 12px;
                        height: 13px;
                        color: #909090;
                    }
                    li:last-child{
                        border:0;
                    }
                }
                .list-header-right {
                    @include rect(200px, 13px);
                    float: right;
                    li {
                        float: left;
                        text-align: 46px;
                        padding: 0 14.4px;
                        font-size: 12px;
                        color: #909090;
                        height: 13px;
                        line-height: 13px;
                        padding: 0;
                        display: block;
                        margin: 0;
                    }
                    li:last-child {
                        padding-top: 2px;
                    }
                }
            }
            .entry-list  {
                width: 700px;
                min-height: 600px;
                .content-box {
                    width: 700px;
                    min-height: 600px;
                    .info-box {
                        padding: 18px 24px;
                        @include rect(700px, 116px);
                        border-bottom: 1px solid hsla(0,0%,59.2%,.1);
                        margin: 0;
                        .info-box-row {
                            @include rect(652px, 16px);
                            ul {
                                li {
                                    float: left;
                                    font-size: 12px;
                                }
                                li:first-child {
                                    font-weight: 500;
                                    color: #b71ed7;
                                    height: 16px;
                                    i {
                                        line-height: 16px;
                                        font-size: 9px;
                                    }
                                }
                                li:nth-child(2),li:nth-child(3),li:nth-child(4) {
                                    font-weight: 500;
                                    color: #909090;
                                    height: 16px;
                                    i {
                                        line-height: 16px;
                                        font-size: 9px;
                                    }
                                }
                            }
                        }
                        .info-box-title {
                            font-size: 17px;
                            font-weight: 600;
                            line-height: 1.2;
                            color: #2e3135;
                            margin: 5px 0 10px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .info-box-operation {
                            @include rect(193.5px, 26px);
                            ul {
                                li {
                                    border: 1px solid #eee;
                                    padding: 0 9.6px;
                                    float: left;
                                    color: #909090;
                                    i {
                                        font-size: 16px;
                                    }
                                    span {
                                        margin-left: 2.6px;
                                    }
                                }
                                li:nth-child(2) {
                                    border-left: 0;
                                }
                                .fenxiang {
                                    margin-left: 9.6px;
                                    border-right:0;
                                    display:none;
                                }
                                .shoucang {
                                    display:none;
                                }
                            }
                        }
                    }
                    .info-box:hover {
                        .info-box-operation {
                            ul {
                                .fenxiang,.shoucang {
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .index-right-section {
        @include rect(240px, 1181px);
        float: right;
        margin-top: 20px;
        .block-body {
            background: #fff;
            @include rect(240px, 81px);
            padding: 15.6px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            margin-bottom: 15.6px;
            img {
                @include rect(50px, 50px);
                float: left;
                margin-right: 6px;
            }
            span {
                display: block;
                float: left;
                font-weight: 600;
                color: #333;
                font-size: 13px;
            }
            span:nth-child(3) {
                font-size: 12px;
                font-weight: normal;
                color: #909090;
                margin-top: 6px;
            }
        }
        .juejin-books {
            @include rect(240px, 345px);
            background: #fff;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            margin-bottom: 15.6px;
            .books-header {
                @include rect(240px, 46px);
                padding: 0 15px;
                cursor:pointer;
                border-bottom: 1px solid hsla(0,0%,59.2%,.1);
                .title {
                    @include rect(170px, 45px);
                    padding-right: 5px;
                    display: block;
                    line-height: 45px;
                    float: left;
                }
                i {
                    @include rect(6px, 12px);
                    display: block;
                    float: left;
                    font-size: 6px;
                    line-height: 45px;
                    margin-left: 5px;
                    font-weight: 600;
                }
            }
            .books {
                padding: 10px 15px;
                @include rect(240px, 92px);
                img {
                    @include rect(52px, 72px);
                    float: left;
                }
                figcaption {
                    margin-left: 10px;
                    @include rect(148px, 72px);
                    float: left;
                    display: block;
                    div {
                        margin-top: 6px;
                        span:first-child {
                            color:#f00;
                            margin-right: 6px;
                        }
                        span:last-child {
                            color: #878c90;
                            text-decoration: line-through;
                        }
                    }
                }
                &:hover {
                    background: #eee;
                }
            }
            .newuser-title {
                @include rect(240px, 20px);
                display: block;
                padding: 0 15px;
                margin-top: 5px;
                span {
                    display: block;
                    @include rect(83.5px, 17px);
                    font-size: 12px;
                    float: left;
                }
                .fengefu {
                    border-bottom: 1px solid hsla(0,0%,59.2%,.1);
                    float: left;
                    width: 120px;
                    margin-top: 10px;
                }
            }
            .giftbag {
                @include rect(240px, 89px);
                padding: 15px 15px 20px 15px;
                img {
                    @include rect(52px, 54px);
                    display: block;
                    float: left;
                }
                figcaption {
                    @include rect(111.3px, 54px);
                    margin-left: 12px;
                    display: block;
                    float: left;
                    div:first-child {
                        margin-bottom: 8px;
                        span {
                            font-size: 14px;
                            font-weight: 700; 
                         }
                         span:nth-child(2) {
                             color:#f00;
                             margin: 0 5px;
                         }
                    }
                    div:last-child {
                        border: 1px solid #007fff;
                        border-radius: 3px;
                        @include rect(62px, 22px);
                        color: #007fff;
                        padding: 0 2px;
                        font-size: 12px;
                        text-align: center;
                        line-height: 22px;
                    }
                    
                }
            }
        }
        .sidebar-user {
            @include rect(240px, 282px);
            background: #fff;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            margin-bottom: 15.6px;
            .sidebar-user-title {
                @include rect(240px, 46px);
                padding: 0 15px;
                border-bottom: 1px solid hsla(0,0%,59.2%,.1);
                .title {
                    @include rect(170px, 45px);
                    padding-right: 5px;
                    display: block;
                    line-height: 45px;
                    float: left;
                }
            }
            .user {
                @include rect(240px, 60px);
                i {
                    @include rect(36px, 36px);
                    display: block;
                    text-align: center;
                    line-height: 36px;
                    font-size: 30px;
                    float: left;
                    margin-right: 9.6px;
                }
                span {
                    display: block;
                    .litter-size {
                        font-size: 12px;
                        color: #909090;
                    }
                }
                &:hover {
                    background: #eee;
                }
            }
        }
        .sidebar-block {
            @include rect(240px, 300px);
            background: #fff;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            border-radius: 2px;
            margin-bottom: 15.6px;
            ul {
                li {
                  padding: 12px;
                  @include rect(240px, 60px);
                  line-height: 40px;
                  img {
                      display: block;
                      @include rect(36px, 36px);
                      float: left;
                      margin-right: 9.6px;
                  }
                }
            }
        }
        .sidebar-block-txt {
            @include rect(240px, 95px);
            font-size: 12px;
            color: #909090;
            li {
                span{
                    &:hover {
                        color: #007fff;
                    }
                }
                i {
                    font-size: 12px;
                }
                p {
                    span{
                        &:hover {
                            color: #007fff;
                        }
                    }
                }
            }
        }

    }
}
.sendtext {
    display: none;
    position: fixed;
    z-index: 100;
    @include rect(100%,100%);
    background-color: rgba(0,0,0,.65);
    left: 0;
    top: 0;
    .sendtxt {
        @include rect(640px, 183px);
        background: white;
        margin: 61px auto;
        position: relative;
        i {
           position: absolute;
           display: block;
           @include rect(16px, 16px);
           top: 8px;
           right: 20px;
        }
        .txt-title {
            @include rect(640px, 40px);
            span {
                @include rect(640px, 40px);
                text-align: center;
                line-height: 40px;
                display: block;
                font-weight: 500;
                font-size: 16px;
            }
            
        }
        .txt {
            @include rect(640px, 93px);
            padding: 0 20px;
            .txt-cont {
                @include rect(100%, 100%);
                border-radius: 2px;
                border: 1px solid hsla(0,0%,59.2%,.2);
                background-color: rgba(226,230,235,.2);
                // outline: #007fff;
                padding: 8px 10px;
                color: #17181a;
            }
            
            [contenteditable]:empty:before {
                content: attr(placeholder);
                display: block;
                color: #999;
            }
            
        }
        .toolbar-ico {
            width: 640px;
            height: 52px;
            padding: 10px 20px;
            display: block;
            float: left;
            ul {
                @include rect(280px, 100%);
                position: relative;
                float: left;
                li {
                    float: left;
                    line-height: 21px;
                    @include rect(48px, 21px);
                    margin-right: 18px;
                    i {
                        display: block;
                        @include rect(16px, 16px);
                        position: static;
                        float: left;
                        color:#007fff;
                    }
                    span {
                        display: block;
                        float: left;
                        color:#007fff;
                    }
                }
            }
            .publish {
                @include rect(72px, 32px);
                background: #007fff;
                border-radius: 2px;
                outline: none;
                border: 0;
                color: #fff;
                float: right;
            }
        }
        
    }
}